<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>H+移动工作平台 - 资产变更历史</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link rel="stylesheet" href="../css/styles.css">
</head>
<body>
  <div class="device-container">
    <!-- 状态栏 -->
    <div class="status-bar">
      <div class="status-bar-left">
        <span class="time">9:41</span>
      </div>
      <div class="status-bar-right">
        <i class="fas fa-signal signal"></i>
        <i class="fas fa-wifi wifi"></i>
        <i class="fas fa-battery-full battery"></i>
      </div>
    </div>
    
    <!-- 导航栏 -->
    <div class="nav-bar">
      <div class="nav-left">
        <a href="asset.html"><i class="fas fa-arrow-left"></i></a>
      </div>
      <div class="nav-title">资产变更历史</div>
      <div class="nav-right">
        <i class="fas fa-filter" id="filterBtn"></i>
      </div>
    </div>
    
    <!-- 内容区域 -->
    <div class="app-content">
      <!-- 资产选择 -->
      <div class="p-4 pb-2">
        <div class="input-group" id="assetSelector">
          <input type="text" readonly placeholder="点击选择资产查看变更历史" class="form-input">
          <i class="fas fa-chevron-right text-gray-400"></i>
        </div>
      </div>
      
      <!-- 资产信息卡片 -->
      <div class="asset-card mx-4 mb-4" id="assetCard" style="display: none;">
        <div class="flex items-center">
          <div class="asset-icon">
            <i class="fas fa-laptop"></i>
          </div>
          <div class="flex-1 ml-3">
            <div class="asset-name" id="assetCardName">联想ThinkPad X1 Carbon</div>
            <div class="asset-meta" id="assetCardMeta">编号: A2023001 | 状态: 在用</div>
          </div>
        </div>
      </div>
      
      <!-- 时间线 -->
      <div class="timeline mx-4" id="historyTimeline" style="display: none;">
        <!-- 时间线项目 -->
        <div class="timeline-item">
          <div class="timeline-dot bg-green-500"></div>
          <div class="timeline-content">
            <div class="timeline-header">
              <div class="timeline-title">资产入库</div>
              <div class="timeline-date">2023-01-15</div>
            </div>
            <div class="timeline-body">
              <div class="grid grid-cols-2 gap-2 text-sm">
                <div>
                  <div class="text-gray-500">操作人</div>
                  <div>张三</div>
                </div>
                <div>
                  <div class="text-gray-500">入库单号</div>
                  <div>RK20230115001</div>
                </div>
                <div>
                  <div class="text-gray-500">供应商</div>
                  <div>联想授权代理商</div>
                </div>
                <div>
                  <div class="text-gray-500">金额</div>
                  <div>¥12,999.00</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="timeline-item">
          <div class="timeline-dot bg-blue-500"></div>
          <div class="timeline-content">
            <div class="timeline-header">
              <div class="timeline-title">资产领用</div>
              <div class="timeline-date">2023-01-20</div>
            </div>
            <div class="timeline-body">
              <div class="grid grid-cols-2 gap-2 text-sm">
                <div>
                  <div class="text-gray-500">领用人</div>
                  <div>李四</div>
                </div>
                <div>
                  <div class="text-gray-500">部门</div>
                  <div>信息科技部</div>
                </div>
                <div>
                  <div class="text-gray-500">用途</div>
                  <div>日常办公</div>
                </div>
                <div>
                  <div class="text-gray-500">审批人</div>
                  <div>王五</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="timeline-item">
          <div class="timeline-dot bg-yellow-500"></div>
          <div class="timeline-content">
            <div class="timeline-header">
              <div class="timeline-title">资产维修</div>
              <div class="timeline-date">2023-03-10</div>
            </div>
            <div class="timeline-body">
              <div class="grid grid-cols-2 gap-2 text-sm">
                <div>
                  <div class="text-gray-500">维修类型</div>
                  <div>硬件维修</div>
                </div>
                <div>
                  <div class="text-gray-500">维修地点</div>
                  <div>现场维修</div>
                </div>
                <div>
                  <div class="text-gray-500">故障描述</div>
                  <div class="col-span-2">键盘部分按键失灵</div>
                </div>
                <div>
                  <div class="text-gray-500">维修费用</div>
                  <div>¥0.00 (保修)</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="timeline-item">
          <div class="timeline-dot bg-purple-500"></div>
          <div class="timeline-content">
            <div class="timeline-header">
              <div class="timeline-title">资产调拨</div>
              <div class="timeline-date">2023-05-15</div>
            </div>
            <div class="timeline-body">
              <div class="grid grid-cols-2 gap-2 text-sm">
                <div>
                  <div class="text-gray-500">调出部门</div>
                  <div>信息科技部</div>
                </div>
                <div>
                  <div class="text-gray-500">调入部门</div>
                  <div>财务部</div>
                </div>
                <div>
                  <div class="text-gray-500">调拨原因</div>
                  <div class="col-span-2">部门人员调整</div>
                </div>
                <div>
                  <div class="text-gray-500">审批人</div>
                  <div>赵六</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="timeline-item">
          <div class="timeline-dot bg-blue-500"></div>
          <div class="timeline-content">
            <div class="timeline-header">
              <div class="timeline-title">资产盘点</div>
              <div class="timeline-date">2023-06-30</div>
            </div>
            <div class="timeline-body">
              <div class="grid grid-cols-2 gap-2 text-sm">
                <div>
                  <div class="text-gray-500">盘点任务</div>
                  <div>2023年上半年资产盘点</div>
                </div>
                <div>
                  <div class="text-gray-500">盘点结果</div>
                  <div>正常</div>
                </div>
                <div>
                  <div class="text-gray-500">盘点人</div>
                  <div>王五</div>
                </div>
                <div>
                  <div class="text-gray-500">备注</div>
                  <div>设备状态良好</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 无数据提示 -->
      <div class="empty-state" id="emptyState">
        <div class="empty-icon">
          <i class="fas fa-history"></i>
        </div>
        <div class="empty-text">请选择资产查看变更历史</div>
      </div>
    </div>
    
    <!-- 底部标签栏 -->
    <div class="tab-bar">
      <a href="home.html" class="tab-item">
        <i class="fas fa-home tab-icon"></i>
        <span>首页</span>
      </a>
      <a href="asset.html" class="tab-item active">
        <i class="fas fa-laptop tab-icon"></i>
        <span>资产</span>
      </a>
      <a href="finance.html" class="tab-item">
        <i class="fas fa-wallet tab-icon"></i>
        <span>财务</span>
      </a>
      <a href="material.html" class="tab-item">
        <i class="fas fa-box tab-icon"></i>
        <span>物资</span>
      </a>
      <a href="profile.html" class="tab-item">
        <i class="fas fa-user tab-icon"></i>
        <span>我的</span>
      </a>
    </div>
  </div>
  
  <!-- 资产选择模态框 -->
  <div class="modal" id="assetModal">
    <div class="modal-content">
      <div class="modal-header">
        <div class="modal-title">选择资产</div>
        <button class="modal-close"><i class="fas fa-times"></i></button>
      </div>
      <div class="modal-body">
        <div class="search-box mb-4">
          <i class="fas fa-search search-icon"></i>
          <input type="text" placeholder="搜索资产编号或名称" class="search-input">
        </div>
        <div class="asset-list">
          <div class="asset-item" data-id="A2023001" data-name="联想ThinkPad X1 Carbon" data-meta="编号: A2023001 | 状态: 在用">
            <div class="asset-info">
              <div class="asset-name">联想ThinkPad X1 Carbon</div>
              <div class="asset-meta">编号: A2023001 | 状态: 在用</div>
            </div>
            <div class="asset-select">
              <i class="fas fa-check-circle"></i>
            </div>
          </div>
          <div class="asset-item" data-id="A2023002" data-name="戴尔 OptiPlex 7080" data-meta="编号: A2023002 | 状态: 在用">
            <div class="asset-info">
              <div class="asset-name">戴尔 OptiPlex 7080</div>
              <div class="asset-meta">编号: A2023002 | 状态: 在用</div>
            </div>
            <div class="asset-select">
              <i class="fas fa-check-circle"></i>
            </div>
          </div>
          <div class="asset-item" data-id="A2023003" data-name="惠普 LaserJet Pro M428fdw" data-meta="编号: A2023003 | 状态: 在用">
            <div class="asset-info">
              <div class="asset-name">惠普 LaserJet Pro M428fdw</div>
              <div class="asset-meta">编号: A2023003 | 状态: 在用</div>
            </div>
            <div class="asset-select">
              <i class="fas fa-check-circle"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn-secondary" id="cancelAssetSelect">取消</button>
        <button class="btn-primary" id="confirmAssetSelect">确定</button>
      </div>
    </div>
  </div>
  
  <!-- 筛选模态框 -->
  <div class="modal" id="filterModal">
    <div class="modal-content">
      <div class="modal-header">
        <div class="modal-title">筛选变更记录</div>
        <button class="modal-close"><i class="fas fa-times"></i></button>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label class="form-label">变更类型</label>
          <div class="grid grid-cols-2 gap-2">
            <label class="checkbox-item">
              <input type="checkbox" name="changeType" value="入库" checked>
              <span class="checkbox-text">资产入库</span>
            </label>
            <label class="checkbox-item">
              <input type="checkbox" name="changeType" value="领用" checked>
              <span class="checkbox-text">资产领用</span>
            </label>
            <label class="checkbox-item">
              <input type="checkbox" name="changeType" value="维修" checked>
              <span class="checkbox-text">资产维修</span>
            </label>
            <label class="checkbox-item">
              <input type="checkbox" name="changeType" value="调拨" checked>
              <span class="checkbox-text">资产调拨</span>
            </label>
            <label class="checkbox-item">
              <input type="checkbox" name="changeType" value="盘点" checked>
              <span class="checkbox-text">资产盘点</span>
            </label>
            <label class="checkbox-item">
              <input type="checkbox" name="changeType" value="处置" checked>
              <span class="checkbox-text">资产处置</span>
            </label>
          </div>
        </div>
        
        <div class="form-group">
          <label class="form-label">时间范围</label>
          <div class="grid grid-cols-2 gap-2">
            <div>
              <label class="text-xs text-gray-500">开始日期</label>
              <input type="date" class="form-input" id="startDate">
            </div>
            <div>
              <label class="text-xs text-gray-500">结束日期</label>
              <input type="date" class="form-input" id="endDate">
            </div>
          </div>
        </div>
        
        <div class="form-group">
          <label class="form-label">操作人</label>
          <input type="text" class="form-input" placeholder="输入操作人姓名">
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn-secondary" id="resetFilter">重置</button>
        <button class="btn-primary" id="applyFilter">应用</button>
      </div>
    </div>
  </div>
  
  <script>
    // 资产选择模态框
    const assetSelector = document.getElementById('assetSelector');
    const assetModal = document.getElementById('assetModal');
    const cancelAssetSelect = document.getElementById('cancelAssetSelect');
    const confirmAssetSelect = document.getElementById('confirmAssetSelect');
    const assetCard = document.getElementById('assetCard');
    const historyTimeline = document.getElementById('historyTimeline');
    const emptyState = document.getElementById('emptyState');
    
    assetSelector.addEventListener('click', function() {
      assetModal.classList.add('active');
    });
    
    cancelAssetSelect.addEventListener('click', function() {
      assetModal.classList.remove('active');
    });
    
    confirmAssetSelect.addEventListener('click', function() {
      const selectedAsset = document.querySelector('.asset-item.selected');
      if (selectedAsset) {
        const assetName = selectedAsset.dataset.name;
        const assetMeta = selectedAsset.dataset.meta;
        
        // 更新资产选择器和资产卡片
        assetSelector.querySelector('input').value = assetName;
        document.getElementById('assetCardName').textContent = assetName;
        document.getElementById('assetCardMeta').textContent = assetMeta;
        
        // 显示资产卡片和时间线，隐藏空状态
        assetCard.style.display = 'block';
        historyTimeline.style.display = 'block';
        emptyState.style.display = 'none';
      }
      assetModal.classList.remove('active');
    });
    
    // 资产项选择
    document.querySelectorAll('.asset-item').forEach(item => {
      item.addEventListener('click', function() {
        document.querySelectorAll('.asset-item').forEach(el => {
          el.classList.remove('selected');
        });
        this.classList.add('selected');
      });
    });
    
    // 筛选按钮
    const filterBtn = document.getElementById('filterBtn');
    const filterModal = document.getElementById('filterModal');
    const resetFilter = document.getElementById('resetFilter');
    const applyFilter = document.getElementById('applyFilter');
    
    filterBtn.addEventListener('click', function() {
      filterModal.classList.add('active');
    });
    
    resetFilter.addEventListener('click', function() {
      // 重置筛选条件
      document.querySelectorAll('input[name="changeType"]').forEach(checkbox => {
        checkbox.checked = true;
      });
      document.getElementById('startDate').value = '';
      document.getElementById('endDate').value = '';
      document.querySelector('input[placeholder="输入操作人姓名"]').value = '';
    });
    
    applyFilter.addEventListener('click', function() {
      // 应用筛选条件
      // 实际应用中这里应该有筛选逻辑
      filterModal.classList.remove('active');
      
      // 模拟筛选效果
      const selectedTypes = Array.from(document.querySelectorAll('input[name="changeType"]:checked'))
        .map(checkbox => checkbox.value);
      
      document.querySelectorAll('.timeline-item').forEach(item => {
        const title = item.querySelector('.timeline-title').textContent;
        let shouldShow = false;
        
        for (const type of selectedTypes) {
          if (title.includes(type)) {
            shouldShow = true;
            break;
          }
        }
        
        item.style.display = shouldShow ? 'flex' : 'none';
      });
    });
    
    // 关闭模态框
    document.querySelectorAll('.modal-close').forEach(button => {
      button.addEventListener('click', function() {
        this.closest('.modal').classList.remove('active');
      });
    });
  </script>
  
  <style>
    /* 时间线样式 */
    .timeline {
      position: relative;
      padding-left: 20px;
    }
    
    .timeline::before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 4px;
      width: 2px;
      background-color: #e5e7eb;
    }
    
    .timeline-item {
      position: relative;
      display: flex;
      margin-bottom: 20px;
    }
    
    .timeline-dot {
      position: absolute;
      left: -20px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      margin-top: 6px;
    }
    
    .timeline-content {
      flex: 1;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      overflow: hidden;
    }
    
    .timeline-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 16px;
      background-color: #f9fafb;
      border-bottom: 1px solid #e5e7eb;
    }
    
    .timeline-title {
      font-weight: 600;
    }
    
    .timeline-date {
      font-size: 12px;
      color: #6b7280;
    }
    
    .timeline-body {
      padding: 12px 16px;
    }
    
    /* 资产卡片样式 */
    .asset-card {
      background-color: white;
      border-radius: 8px;
      padding: 12px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    
    .asset-icon {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      background-color: #e0f2fe;
      color: #0284c7;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
    }
    
    .asset-name {
      font-weight: 600;
      margin-bottom: 2px;
    }
    
    .asset-meta {
      font-size: 12px;
      color: #6b7280;
    }
    
    /* 空状态样式 */
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 40px 20px;
      color: #9ca3af;
    }
    
    .empty-icon {
      font-size: 48px;
      margin-bottom: 16px;
      opacity: 0.5;
    }
    
    .empty-text {
      font-size: 14px;
    }
    
    /* 复选框样式 */
    .checkbox-item {
      display: flex;
      align-items: center;
      padding: 8px;
      border: 1px solid #e5e7eb;
      border-radius: 6px;
    }
    
    .checkbox-text {
      margin-left: 8px;
      font-size: 14px;
    }
  </style>
</body>
</html>